<template>
	<view class="app-container">
		<view class="shop white-bg radius-24 pd-26">
			<view class="flex flex-center mg-top-30">
				<view class="my-h2 flex1">已选门店</view>
				<text class="re-select" @click="$to('./order-appointment?sn=' + order.sn)">重选</text>
			</view>
			<my-hr class="mg-top-32 mg-bottom-32"></my-hr>
			
			<view>
				<view class="flex flex-center">
					<image class="width-38 mg-right-12" src="@/static/icon/shop.png?" mode="widthFix"></image>
					<view class="my-h2">
						<text class="color-orange">{{shop.name}}</text>
					</view>
				</view>
				<view class="font-26 color-light-gray mg-top-28 mg-bottom-28">{{shop.province_name}}{{shop.city_name}}{{shop.region_name}}{{shop.address}}</view>
			</view>
			
			<my-hr class="mg-top-32 mg-bottom-32"></my-hr>
			<view class="flex flex-center mg-top-30 mg-bottom-30">
				<view class="my-h2 flex1">拍摄日期</view>
				<text class="color-orange font-28 bold" @click="openCalendar">{{bookDate}}</text>
				<image src="/static/icon/right_arrow.png" mode="widthFix" class="width-15 mg-left-10"></image>
			</view>
			
			<time-list :times="shop.times" :current="bookTime" class="pd-bottom-30" @select="changeTime"></time-list>
		</view>
		<!-- 日历 -->
		<calendar ref="calendar" v-show="calendarShowStatus" @change="changeDate" @close="calendarShowStatus = false"></calendar>
		
		<!-- <goods-desc ></goods-desc> -->
		<goods-desc class="mg-top-30 radius-10" :desc="goodsinfo.desc" :img="goodsinfo.detail_img" :name="goodsinfo.name"></goods-desc>
		
		<view class="white-bg pd-left-26 pd-right-26 mg-top-30 radius-26">
			<card-info :city-type.sync="order.cityinfo.type" :mobile="order.mobile1" :card="order.card"></card-info>
		</view>
			
		
		<view class="pd-30 radius-26 white-bg mg-top-30">
			<view>
				<view class="input-item"><input class="input color-gray" placeholder="您的姓名 (不可修改)" v-model="order.user_name" /></view>
				<view class="input-item"><input class="input color-gray" placeholder="您的手机号 (请输入下单时的手机号)" v-model="order.mobile" type="tel" /></view>
				<view class="input-item"><input class="input color-gray" placeholder="拍摄人姓名 (默认为下单人,可修改)" v-model="order.photoer_name" /></view>
				<view class="input-item"><input class="input color-gray" placeholder="拍摄人电话 (默认为下单手机号,可修改)" v-model="order.photoer_mobile" type="tel" /></view>
				<view class="input-item"><textarea class="input color-gray" placeholder="备注" v-model="order.note" style="height: 80rpx;" /></view>
			</view>
			
			<view class="white-bg mg-top-30 mg-bottom-30 color-gray font-mini">
				<view class="my-h2 mg-top-40 mg-bottom-20">预约须知：</view>
				<ol class="mg-left-0 pd-left-30 ">
					<li>若门店预约满额,我们的客服将以电话形式与您再次确认可预约时间,请注意查收来电</li>
					<li>您可以在拍掇前<text class="color-orange">48小时</text>对订单进行修改,来选择您需要的时间。<strong>每个订单只有两次修改的机会</strong></li>
					<li>订单确认后,如未能在确定拍摄时间内拍摄的,将一律视作已拍摄完成,不可再补拍</li>
					<li>门店化妆品采用温和无刺激产品,我们仍建议敏感肌肤使用自己的化妆品</li>
					<li>周末为拍摄高峰期,如预约周末时间,请提前3-5天以上预约。</li>
				</ol>
				<view class="call-mobile">
					如需帮助，可拨打客服电话<br/>
					<text class="font-40">400-007-2201</text>
				</view>
			</view>
		</view>
		
		
		
		<view class="flex mg-top-60">
			<my-button title="联系客服" class="flex1 mg-right-20" line-height="92rpx"  @click="callKefu"></my-button>
			<my-button title="提交订单" class="flex1 mg-left-20" bg-color="#FF8B3E" line-height="92rpx" color="#fff" @click="addOrder"></my-button>
		</view>
	</view>
</template>

<script>
	import timeList from './components/time-list.vue'
	import goodsDesc from './components/goods-desc.vue'
	import cardInfo from './components/card-info.vue'
	import calendar from './components/calendar.vue'
		
	import OrderApi from '@/api/order.js'
	
	export default {
		components: { timeList, goodsDesc, cardInfo, calendar },
		data() {
			return {
				kefuMobile: '4000072201',
				calendarShowStatus: false,
				bookDate: '',
				bookTime: '',
				verifyTimes: 0,
				order: {
					id: 0,
					sn: '',
					user_name: '',
					note: '',
					photoer_name: '',
					photoer_mobile: '',
					goodsinfo:{
						desc: '',
						detail_img: '',
						name: ''
					},
					cardinfo: {
						code_inner: '',
						pass_inner: ''
					},
					cityinfo: {
						type: ''
					}
				},
				shop: {
					id: 0,
					name: '',
					province_name: '',
					city_name: '',
					region_name: '',
					address: '',
					times: []
				}
			};
		},
		computed:{
			goodsinfo() { return this.order.goodsinfo;}
		},
		created() {
			const query = this.$route.query
			this.order.sn = query.sn
			this.shop.id = query.shop
			this.bookDate = query.date
			this.bookTime = query.time
			this.init()
		},
		watch:{
			bookDate() {
				if (this.shop.id > 0 && this.order.id) {
					this.getShop()
				}
			}
		},
		methods:{
			init() {
				OrderApi.detail(this.order.sn).then(res => {
					this.order = res.data
					console.log(res.data);
					if (!this.bookDate) {
						this.bookDate = this.order.time.substr(0, 10)
						this.bookTime = this.order.time.substr(11,5)
						this.shop.id = this.order.shopinfo.id
					}
					this.getShop()
				})
			},
			getShop() {
				OrderApi.shop(this.shop.id, this.order.goods, this.bookDate).then(res => {
					this.shop = res.data;
				}).catch(res => {})
			},
			openCalendar() {
				this.calendarShowStatus = true
			},
			changeDate(date) {
				this.bookDate = date.fulldate
				this.calendarShowStatus = false
			},
			changeTime(info) {
				this.bookTime = info.time
			},
			addOrder() {
				const order = this.order
				const mobile = order.photoer_mobile
				const myMobile = order.mobile
				
				if (order.user_name.length < 2) {
					uni.showToast({
						title: '请正确填写您的姓名',
						icon: 'none'
					})
					return
				}
				
				if (!(/^1\d{10}$/.test(myMobile))) {
					uni.showToast({
						title: '您的手机号格式错误',
						icon: 'none'
					})
					return 
				}
				
				
				if (mobile  && !(/^1\d{10}$/.test(mobile))) {
					uni.showToast({
						title: '拍摄人手机号格式错误',
						icon: 'none'
					})
					return 
				}
				
				
				OrderApi.detail(this.order.sn).then(res => {
					let order = res.data;
					let msg = '';
					
					// 初次提交
					if (order.update_count == 0) {	
						msg = '确定提交吗?';
					
					// 修改
					} else if (order.update_count < 3) {
						let num = 3 - order.update_count;
						msg = '订单修改还有' + num + '次机会，确定提交吗?';
						
					// 修改次数已用完
					} else {
						return uni.showToast({
							title: '2次修改机会已用完，请联系客服',
							icon: 'none'
						})
					}
					
					
					uni.showModal({
						content: msg,
						showCancel: true,
						success: (res) => {
							console.log(res);
							if (res.confirm) {
								this.verifyTimes = 0;
								let time = this.bookDate + " " + this.bookTime + ":00";
								let data = {
									sn: this.order.sn,
									shop: this.shop.id,
									time: time, 
									mobile: this.order.mobile,
									user_name: this.order.user_name,
									photoer_name: this.order.photoer_name,
									photoer_mobile: this.order.photoer_mobile,
									note: this.order.note
								};
								
								uni.showLoading({title: '请稍等'})
								
								OrderApi.add(data).then(res => {
									// 订单提交成功
									if (res.code == 200) {
										this.verifyOrder(data)
									} else {
										uni.hideLoading()
										uni.showToast({
											title: res.message,
											icon: 'none'
										})
									}
								}).catch(res => {
									uni.hideLoading()
								})
							}
						}
					})
				}).catch(res => {})
			},
			// 验证订单
			verifyOrder(data) {
				
				OrderApi.verify(data).then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						uni.showToast({ icon:'success', title:'预约成功' })
						const url = './order-finish?sn=' + this.order.sn
						setTimeout(() => { uni.navigateTo({ url }) }, 1500)
					} else {
						if (this.verifyTimes == 5) {
							uni.hideLoading()
							uni.showToast({ title: '提交失败', icon: 'none' })
						} else {
							this.verifyTimes += 1
							setTimeout(() => {
								this.verifyOrder(data)
							}, 1000);
						}
					}
				})
			},
			callKefu() {
				uni.makePhoneCall({
					phoneNumber: this.kefuMobile,
					success() {
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.re-select{
		color: #fff;
		background-color: $uni-color-bg-orange;
		line-height: 48rpx;
		width: 96rpx;
		font-size: 24rpx;
		text-align: center;
		border-radius: 14rpx;
	}
	.input-item{
		border-radius: 20rpx;
		background-color: #F6F6F6;
		margin-top: 22rpx;
		.input{
			font-size: 28rpx;
			line-height:38rpx;
			padding: 25rpx 36rpx;
		}
	}
	
	li{
		margin: 15rpx 0;
		line-height: 1.5;
	}
	.call-mobile{
		margin-top: 40rpx;
		text-align: center;
		color:$uni-color-orange;
		border:2px solid $uni-color-orange;
		border-radius: 24rpx;
		font-weight: bold;
		font-size:28rpx;
		padding:26rpx 0;
	}
</style>
